{% extends "base.html" %}
{% load i18n %}

{% block head-css-ext %}
  <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/layout.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/datePicker.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/demo.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/jquery.autocomplete.css" media="screen" />
{% endblock %}

{% block head-js-ext %}
  <!-- jQuery -->
  <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
  <!-- required plugins -->
  <script type="text/javascript" src="{{MEDIA_URL}}js/date.js"></script>
  <script type="text/javascript" src="{{MEDIA_URL}}js/date_es.js"></script>
  <!--[if IE]><script type="text/javascript" src="{{MEDIA_URL}}js/jquery.bgiframe.js"></script><![endif]-->
  <!-- jquery.datePicker.js -->
  <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.datePicker.js"></script>
  <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.autocomplete.js"></script>
{% endblock %}


{% block head-js-embedded %}
  <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
      $('#productos').autocomplete('/ajax/buscarproducto/', {
        multiple: true,
        dataType: 'json',
        width: 300,
        parse: function(data){
          return $.map (data, function(row) {
            return {
              data: row,
              result: row[0]
            }
          });
        }
      }).result(function(event, data, formatted) {
        $('#productos').val(data[0]);
      });            
    });
    
    
    function finalizar(){
        var href = "{% url pedidos %}"
        location.href = href;
    }
    
    
    
  </script>
{% endblock %}

{% block content-box1 %}
<form method="post" action=".">
    <table>
        <tr>            
          {% if mensaje %}
            {{ mensaje }}     
          {% endif %}
          <td><label for="productos">Producto:</label>{% if form.producto.errors %} <span class="error">{{ form.producto.errors|join:", " }}</span>{% endif %}</td>
          <td>{{ form.producto }}</td>
        </tr>
        <tr>
          <td><label for="cantidad">Cantidad:</label>{% if form.candidad.errors %} <span class="error">{{ form.cantidad.errors|join:", " }}</span>{% endif %}</td>
          <td>{{ form.cantidad }}</td>
        </tr>
        <tr>
            <td>Valor Pedido:</td>
            <td>$ {{ valor }}
        </tr>       
        {{ form.pedido }}        
    </table>
    <input type="submit" value="{% trans 'Submit' %}" />
</form>
    <br>
    {% ifnotequal valor 0 %}
        <button id="Finalizar" onclick="finalizar()">Finalizar</button>
    {% endifnotequal %}


{% endblock %}